<template>
	<div class="head">
		<div class="tabs_title">
			<div
				v-for="(item,index) in tabs"
				:key="item.id"
				class="tab"
				@click="ChildrenOnclick(index)"
			>
				<span :class="{on:item.isActive}">{{item.value}}</span>
			</div>
		</div>
		<div class="tabs_content">
			<slot></slot>
		</div>
	</div>
</template>

<script>
	export default {
		name:"Header",
		props:['tabs'],
		data() {
			return {
				
			}
		},
		methods: {
			ChildrenOnclick(i){
				// 获取被点击标题的索引
				const index = i;
				this.$emit("handeleItemTab", index);
			}
		}
	}
</script>

<style scoped>
	.tabs_title{
		height:40px;
		background:#4CD964;
		display:flex;
	}
	.tab{
		display:flex;
		justify-content:space-between;
		flex:3;
		justify-content:center;
		line-height:35px;
	}
	.on{
		color:#fff;
		border-bottom:1px solid #fff;
		display:inline-block;
		height:35px;
		line-height:35px;
	}
</style>
